import { Router } from '@angular/router';
import { CoolLocalStorage } from 'src/app/common/coolStorage/cool-local-storage';
import { EstateIndexService } from './../../estate/index/service/estate-index.service';
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common'
declare const qq: any;

@Component({
    selector: 'app-estate-map',
    templateUrl: './estate-map.component.html',
    styleUrls: ['./estate-map.component.scss']
})
export class EstateMapComponent implements OnInit {

    loading = true;
    error = false;

    cpParams: any;
    cityReq: any;
    latngItems = [];
    mapLables = [];
    public map: any;
    public ll = {
        Name: "南昌市",
        lat: 28.68,
        lng: 115.85,
        Id: ""
    }
    constructor(
        private location: Location,
        private service: EstateIndexService,
        private router: Router,
        private storage: CoolLocalStorage,

    ) { }

    ngOnInit() {

        let cityList: any = this.storage.getObject('cityList')
        let zone: any = this.storage.getObject('zone')

        cityList.forEach(element => {

            if (element.Id === zone) {
                this.cityReq = element;

            }
        });

        this.service.reqdata.pager.Limit = 0;
        this.getList(0)
    }

    onReady(mapNative: any) {

        mapNative.setOptions({
            zoom: 10,
            center: new qq.maps.LatLng(this.ll.lat, this.ll.lng),
            zoomControl: false,
            mapTypeControl: false,
            scaleControl: true,
            scaleControlOptions: {
                position: qq.maps.ControlPosition.LEFT_TOP
            }
        });
        this.map = mapNative;

    }

    mapLabel(item) {

        console.log(item);

        let lable = new qq.maps.Label({
            position: new qq.maps.LatLng(item.lat, item.lng),
            map: this.map,
            content: item.Name
        });

        lable.setStyle({
            color: "#fff",
            backgroundColor: "#19BB5E",
            borderRadius: "100px",
            padding: "12px",
            fontSize: "12px",
            borderColor: "#19BB5E"
        })

        lable.setTitle(item.Id.toString());
        //覆盖物事件
        this.markerClick(lable)
        this.mapLables.push(lable);

    }


    markerClick(lable) {
        //获取标记的点击事件
        qq.maps.event.addListener(lable, 'click', event => {
            console.log(lable);
            this.router.navigate(['/workspace/estate/detail'], {
                queryParams: {
                    project: lable.title
                }
            });
        });
    }

    deleteOverlays(markersArray) {

        if (markersArray) {
            for (let i in markersArray) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
    }

    // 获取列表
    getList(start) {
        this.loading = true;
        this.service.getList(
            start,
            res => {
                this.loading = false
                this.error = false;
                if (res.Success && res.Result) {
                    this.latngItems = [];
                    this.successList(res.Result.Value);
                }
            },
            err => {
                this.loading = false
                this.error = true;
            }
        )
    }

    successList(items) {

        this.deleteOverlays(this.mapLables);

        items.forEach(element => {
            if (element.Latitude && element.Longitude) {
                let o = {
                    Name: element.Name,
                    lat: element.Latitude,
                    lng: element.Longitude,
                    Id: element.Id
                }
                this.latngItems.push(o);
                this.mapLabel(o);
            }
        });

    }

    handleGenerate(data) {
        this.service.reqdata.filter.Lambda = data.Lambda
        this.service.reqdata.sorters = data.Sorter
        this.service.reqdata.pager.Limit = 0;
        this.loading = false
        this.getList(0)
    }
    onClickLeft() {
        this.location.back()
    }

}
